<template>
  <div>
    <!-- support from v2.25.0  -->
    <a-table :columns="columns" :data="data" style="margin-top: 20px" :pagination="false">

      <template #fieldRemark="{ record }">
        <a-input v-model="record.fieldRemark" />
      </template>

      <template #fieldJavaType="{ record }">
        <a-select  v-model="record.fieldJavaType">
          <a-option v-for="(val,index) of fieldJavaTypes" :key="index" :value="val">{{
              val
            }}</a-option>
        </a-select>
      </template>


      <template #effectType="{ record }">
        <a-select  v-model="record.effectType">
          <a-option v-for="(val,index) in Object.keys(formTypes)" :key="index" :value=val>{{formTypes[val]}}</a-option>
        </a-select>
      </template>


      <template #whetherTable="{ record }">
        <a-switch  checked-value="Y" unchecked-value="N" v-model="record.whetherTable"/>
      </template>


      <template #whetherAddUpdate="{ record }">
        <a-switch  checked-value="Y" unchecked-value="N" v-model="record.whetherAddUpdate"/>
      </template>

      <template #whetherRequired="{ record }">
        <a-switch  checked-value="Y" unchecked-value="N" v-model="record.whetherRequired"/>
      </template>

      <template #queryWhether="{ record }">
        <a-switch  checked-value="Y" unchecked-value="N" v-model="record.queryWhether"/>
      </template>


      <template #isTableKey="{ record }">
        <a-switch  checked-value="Y" unchecked-value="N" v-model="record.isTableKey"/>
      </template>



      <template #queryType="{ record }">
        <a-select  v-model="record.queryType"  allow-clear>
          <a-option v-for="(val,index) of Object.keys(queryOperatorTypes) " :key="index" :value="val">{{
              queryOperatorTypes[val]
            }}</a-option>
        </a-select>
      </template>



      <template #province="{ record }">
        <a-select
            v-model="record.province"
            @change="
          () => {
            record.city = '';
          }
        "
        >
          <a-option v-for="value of Object.keys(options)" :key="value">{{
              value
            }}</a-option>
        </a-select>
      </template>
      <template #city="{ record }">
        <a-select
            v-model="record.city"
            :options="options[record.province] || []"
        />
      </template>
    </a-table>


    <div class="actions" style="text-align: center;margin-top: 15px">
      <a-space style="text-align: center">
        <a-button type="secondary" @click="goPrev">
          {{ $t('stepForm.button.prev') }}
        </a-button>
        <a-button type="primary" @click="onNextClick">
          {{ $t('stepForm.button.next') }}
        </a-button>
      </a-space>
    </div>


  </div>

</template>

<script lang="ts" setup>
  import {reactive, ref,onMounted,watch} from 'vue';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import { ChannelInfoModel } from '@/api/form';
  import {dbTableColumnConf, TbConf} from "@/api/dev";

  const emits = defineEmits(['changeStep']);
  const row = defineProps(['rowId'])
  const formRef = ref<FormInstance>();
  const formData = ref<ChannelInfoModel>({
    advertisingSource: '',
    advertisingMedia: '',
    keyword: [],
    pushNotify: true,
    advertisingContent: '',
  });


  const fieldJavaTypes = ['String','Integer','Date','Long','BigDecimal','Float','Double','Short','Boolean']

  const queryOperatorTypes = {
    EQ: "等于 (Equal to)",
    NEQ: "不等于 (Not equal to)",
    LIKE: "类似 (Pattern match)",
    NOT_LIKE: "不类似 (Not pattern match)",
    IN: "在某个集合中 (In a set of values)",
    NOT_IN: "不在某个集合中 (Not in a set of values)",
    BETWEEN: "在范围之间 (Between two values)",
    NOT_BETWEEN: "不在范围之间 (Not between two values)",
    GT: "大于 (Greater than)",
    LT: "小于 (Less than)",
    GTE: "大于等于 (Greater than or equal to)",
    LTE: "小于等于 (Less than or equal to)",
    IS_NULL: "是空 (Is null)",
    IS_NOT_NULL: "不是空 (Is not null)"
  };


  const queryTypeMap = {
    String: "LIKE",
    Float:"EQ",
    Double:"EQ",
    Integer:"EQ",
    Short:"EQ",
    Date:"BETWEEN",
    BigDecimal:"EQ",
    Boolean:"EQ",
    Timestamp:"BETWEEN"
  };

  const options = {
    VARCHAR: ['LONGTEXT', 'Chaoyang', 'Changping'],
    Sichuan: ['Chengdu', 'Mianyang', 'Aba'],
    Guangdong: ['Guangzhou', 'Shenzhen', 'Shantou'],
  };


  const mysqlToJavaTypeMap = {
    VARCHAR: "String",
    INT: "Integer",
    LONGTEXT: "String",
    BIGINT: "Long",
    ENUM: "String",
    JSON: "String",
    TEXT: "String",
    MEDIUMTEXT: "String",
    DATETIME: "Date",
    SET: "String",
    TIMESTAMP: "Timestamp",
    CHAR: "String",
    BINARY: "String",
    FLOAT: "Float",
    VARBINARY: "String",
    TINYINT: "Byte",
    DOUBLE: "Double",
    DECIMAL: "BigDecimal",
    BLOB: "String",
    BIT: "Boolean",
    SMALLINT: "Short",
    MEDIUMBLOB: "String",
    TIME: "Date",
  };

  const formTypeMap = {
    String: "INPUT",
    Float:"INPUT_NUMBER",
    Double:"INPUT_NUMBER",
    Integer:"INPUT_NUMBER",
    Short:"INPUT_NUMBER",
    Date:"DATEPICKER_YMD",
    BigDecimal:"INPUT_NUMBER",
    Boolean:"SWITCH",
    Timestamp:"DATEPICKER_YMD"
  };


  const formTypes = {
    INPUT: "input输入框",
    INPUT_NUMBER: "input数字输入框",
    INPUT_TAG: "标签输入框",
    RADIO: "单选框",
    SELECT: "Select 下拉框",
    SLIDER: "滑动输入条",
    SWITCH: "开关 Switch",
    TEXTAREA: "文本域 Textarea",
    TIMEPICKER: "时间选择框",
    DATEPICKER_YMD: "年月日选择框",
    DATEPICKER_YMD_HMS: "年月日时分秒选择框",
    DATEPICKER_YM: "年月选择框",
    DATEPICKER_Y: "年选择框",
    DATEPICKER_YMD_RANGE: "年月日范围选择框",
    COLORPICKER: "颜色选择器",
    CHECKBOX: "复选框"
  };


  const columns = [
    {
      title: '字段名称',
      dataIndex: 'fieldName',
      slotName: 'fieldName',
    },
    {
      title: '字段注释',
      dataIndex: 'fieldRemark',
      slotName: 'fieldRemark',
    },
    {
      title: '字段类型',
      dataIndex: 'fieldType',
    },
    {
      title: '实体类型',
      dataIndex: 'fieldJavaType',
      slotName: 'fieldJavaType',
    },
    {
      title: '表单类型',
      dataIndex: 'effectType',
      slotName: 'effectType',
    },
    {
      title: '列表显示',
      dataIndex: 'whetherTable',
      slotName: 'whetherTable'
    },
    {
      title: '是否增改',
      dataIndex: 'whetherAddUpdate',
      slotName: 'whetherAddUpdate'
    },
    {
      title: '是否必填',
      dataIndex: 'whetherRequired',
      slotName: 'whetherRequired'
    },
    {
      title: '是否作为查询条件',
      dataIndex: 'queryWhether',
      slotName: 'queryWhether'
    },
    {
      title: '查询条件类型',
      dataIndex: 'queryType',
      slotName: 'queryType'
    },
    {
      title: '是否是主键',
      dataIndex: 'isTableKey',
      slotName: 'isTableKey'
    }
  ];

  const data = reactive<TbConf[]>([]);

  const handleChange = (rowIndex:string) => {
    //  data[rowIndex].city = '';
  };


  const isSupportedMySQLType = (mysqlType:string) => {
     return Object.prototype.hasOwnProperty.call(mysqlToJavaTypeMap, mysqlType);
  };

  const isSupportedFormType = (javaType:string) => {
    return Object.prototype.hasOwnProperty.call(formTypeMap, javaType);
  };


  const isSupportedQueryType = (javaType:string) => {
    return Object.prototype.hasOwnProperty.call(queryTypeMap, javaType);
  };

  const fillFieldJavaType = (fieldType:any) => {
    if(isSupportedMySQLType(fieldType)){
        return  mysqlToJavaTypeMap[fieldType as keyof typeof mysqlToJavaTypeMap];
    }
    return 'INPUT';
  }

  const fillFormType = (fieldJavaType:any) => {
    if(isSupportedFormType(fieldJavaType)){
      return  formTypeMap[fieldJavaType as keyof typeof formTypeMap];
    }
    return '';
  }


  const fillQueryType = (fieldJavaType:any) => {
    if(isSupportedQueryType(fieldJavaType)){
      return  queryTypeMap[fieldJavaType as keyof typeof queryTypeMap];
    }
    return '';
  }



  const filterJavaType = () => {
    const noShow =['DELETE_FLAG','MODIFIED_ID','GMT_CREATE','GMT_MODIFIED','CREATE_ID'];
    data.forEach((item, index) => {
      if(!item.fieldJavaType){
          item.fieldJavaType = fillFieldJavaType(item.fieldType)
      }
      if(!item.effectType){
          item.effectType = fillFormType(item.fieldJavaType)
      }
      if(!item.queryType){
        item.queryType = fillQueryType(item.fieldJavaType)
      }
      if(noShow.includes(item.fieldName)){
        if(!item.whetherAddUpdate){
          item.whetherAddUpdate='N'
        }
        if(!item.whetherTable){
          item.whetherTable='N'
        }
      }
    });
  }

  const initColumns = async () => {
    const res = await dbTableColumnConf('superchart',row.rowId);
    data.push(...res.data);
    filterJavaType();
    console.log(data)
  };

  onMounted(() => {
    initColumns();
  });



  const onNextClick = async () => {
    const res = await formRef.value?.validate();
    if (!res) {
      emits('changeStep', 'submit2', data);
    }
  };
  const goPrev = () => {
    emits('changeStep', 'backward');
  };
</script>

<style scoped lang="less">
  .container {
    .keep-margin {
      margin-bottom: 20px;
    }
  }

  .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 0;
    background-color: var(--color-bg-2);
  }

  .steps {
    margin-bottom: 36px;
  }

  .form {
    width: 540px;
  }

  .form-content {
    padding: 8px 50px 0 30px;
  }
</style>
